<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-29 16:03:57
 * @LastEditTime: 2021-01-22 11:09:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-admin/src/pages/merchant/add.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="merchant-add">
        <div class="ma-step">
            <i-steps :current="step" style="width: 50%">
                <i-step title="进行中" content="商户资料"></i-step>
                <i-step title="待进行" content="添加用户"></i-step>
                <i-step title="待进行" content="审核成功"></i-step>
            </i-steps>
        </div>
        <div class="ma-form">
            <form-box ref="merchantAdd" :form="form">
                <div class="mf-common mf-base" v-if="step === 0">
                    <div class="mc-input">
                        <form-item label="名称：" :filed="form['name']">
                            <i-input v-model="form['name']['value']"></i-input>
                        </form-item>
                        <form-item label="描述：">
                            <i-input
                                type="textarea"
                                :autosize="{ minRows: 6, maxRows: 10 }"
                                placeholder="商户描述"
                            ></i-input>
                        </form-item>
                        <form-item label="封面：" :filed="form['cover']">
                            <img-video-uploader :max="1" @upload-success="coverChange"></img-video-uploader>
                        </form-item>
                    </div>
                    <div class="mc-submit">
                        <i-button type="primary" @click.native="doNextStep">下一步</i-button>
                    </div>
                </div>
                <div class="mf-common mf-users" v-else-if="step === 1">
                    <div class="mc-input">
                        <form-item :filed="form['merchantUsers']">
                            <i-table :columns="columns" :data="data">
                                <template slot-scope="{ index }" slot="avatar">
                                    <img-video-uploader
                                        :value="defaultValue.merchantUserCover[index]"
                                        :max="1"
                                        @upload-success="(val) => {merchantUserCoverChange(index, val)}"
                                    ></img-video-uploader>
                                </template>
                                <template slot-scope="{ index }" slot="username">
                                    <i-input
                                        placeholder="账户/手机号"
                                        v-model="form['merchantUsers']['value'][index]['username']['value']"
                                    ></i-input>
                                </template>
                                <template slot-scope="{ index }" slot="passwd">
                                    <i-input
                                        placeholder="密码"
                                        v-model="form['merchantUsers']['value'][index]['passwd']['value']"
                                    ></i-input>
                                </template>
                                <template slot-scope="{ index }" slot="action">
                                    <i-button size="small" @click="deleteMerchantUser(index)">删除</i-button>
                                </template>
                            </i-table>
                        </form-item>
                    </div>
                    <div class="mu-add">
                        <div class="ma-btn" @click="addMerchantUserForm">
                            <span>新增</span>
                        </div>
                    </div>
                    <div class="mc-submit">
                        <i-button @click.native="step = step - 1">上一步</i-button>
                        <i-button
                            type="primary"
                            style="margin-left: 8px"
                            @click.native="doNextStep"
                        >提交审核</i-button>
                    </div>
                </div>
                <div class="mf-common mf-success" v-else-if="step === 2">
                    <div class="gs-icon">
                        <i class="iconfont icon-chenggong"></i>
                    </div>
                    <div class="gs-text">
                        <span>提交审核成功</span>
                    </div>
                    <div class="gs-description">
                        <p>
                            提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用
                            Message
                            全局提示反馈即可。灰色区域可以显示一些补充的信息。
                        </p>
                    </div>
                    <div class="gs-link">
                        <i-button
                            type="primary"
                            style="margin-left: 8px"
                            @click.native="go(`/merchant/info?id=${merchant.id}`)"
                        >查看商户</i-button>
                        <i-button style="margin-left: 8px">返回列表</i-button>
                    </div>
                </div>
            </form-box>
        </div>
        <div class="ma-notice">
            <div class="gn-common gn-base" v-if="step === 0">
                <div class="mc-title">
                    <span>说明</span>
                </div>
                <div class="mc-content">
                    <div class="mc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                    <div class="mc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

/*eslint-disable */
import { Merchant } from '@/model/merchant'
import { MerchantUser } from '@/model/merchant/user'
import { formBox, formItem } from '@/components/form'
import imgVideoUploader from '@/components/img-video-uploader'
import { Oss } from '@/model/oss'
export default {
    components: {
        formBox,
        formItem,
        imgVideoUploader
    },
    data() {
        return {
            step: 0,
            defaultValue: {
                cover: [],
                merchantUserCover: []
            },
            merchantEnum: Merchant.ENUM.init(),
            form: Merchant.FORM.init('add'),
            columns: [
                {
                    title: '头像',
                    slot: 'avatar'
                },
                {
                    title: '用户名',
                    slot: 'username'
                },
                {
                    title: '密码',
                    slot: 'passwd'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            data: [],
            merchant: new Merchant()
        }
    },
    watch: {
        'form.merchantUsers.value': function (val) {
            this.data = []
            for (let i = 0; i < val.length; i++) {
                this.data.push({})
            }
        }
    },
    methods: {
        async init() {
            this.merchantEnum = await Merchant.ENUM.load()
        },
        coverChange(e) {
            this.defaultValue['cover'] = e
            this.form['cover']['value'] = e.length ? e[0]['filename'] : ''
        },
        addMerchantUserForm() {
            this.$set(this.defaultValue['merchantUserCover'], this.form['merchantUsers']['value'].length, [new Oss({ filename: this.form['cover']['value'] })])
            let newMerchantUser = MerchantUser.FORM.init('add')
            this.form['merchantUsers']['value'].push(newMerchantUser)
        },
        deleteMerchantUser(index) {
            this.form['merchantUsers']['value'].splice(index, 1)
        },
        merchantUserCoverChange(index, val) {
            this.$set(this.defaultValue['merchantUserCover'], index, val)
            this.form['merchantUsers']['value'][index]['avatar']['value'] = val.length ? val[0]['filename'] : ''
        },
        doNextStep() {
            const rule = [
                null,
                null
            ]
            this.$refs['merchantAdd'].validate(rule[this.step]).then(result => {
                if (this.step < 1) {
                    this.step++
                    return
                }
                this.addMerchant(result)
            }).catch((e) => {
                this.$Message.warning('请确认填写信息')
            })
        },
        addMerchant(result) {
            Merchant.API('add', { params: {}, data: result['form'] }).then(res => {
                const { data } = res
                this.step++
                this.merchant = new Merchant(data)
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.merchant-add {
    padding: 10px;
    background: white;
    .ma-step {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .ma-form {
        display: flex;
        justify-content: center;
        padding: 20px 0 40px 0;
        .mf-common {
            width: 600px;
            .mc-submit {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
            }
        }
        .mf-base {
            .ql-container {
                height: 500px;
            }
        }
        .mf-users {
            .mu-add {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                margin-top: 20px;
                border: 1px dashed #e9e9e9;
            }
        }
        .mf-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            .gs-icon {
                i {
                    font-size: 100px;
                    color: #19be6b;
                }
            }
            .gs-text {
                font-size: 18px;
                color: #000;
            }
            .gs-description {
                padding: 20px 0;
            }
        }
    }
    .ma-notice {
        .gn-common {
            padding: 10px;
            border: 1px solid #abdcff;
            background: #f0faff;
            .mc-title {
                display: flex;
                align-items: center;
                height: 40px;
                span {
                    font-size: 18px;
                }
            }
            .mc-content {
                .mc-item {
                    .gi-label {
                        height: 30px;
                        span {
                            font-size: 16px;
                        }
                    }
                    &:not(:first-child) {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}
</style>